/*
 * @Description: 调研统计列表混入
 */
import {
  DEFAULT_SPAN, DEFAULT_TAB, FIRST_INDEX, HIDE_CELL, mergeSpan,
  SECOND_INDEX,
} from '@/utils/constants';
import { cleanHtml, isCompanyLeader } from '@/utils/utils';
import {
  chain, cloneDeep, filter, get, isEmpty, keys, size,
} from 'lodash-es';
import dayjs from 'dayjs';
import { getStorageInfo } from '@/api/utils/storage-util';

export default {
  data() {
    return {
      isEmpty,
      size,
      dayjs,
      activeTab: '',
      tableDataMap: {},
      tableData: [],
      currentTableData: [],
      tableDataOption: [
        {
          key: 'researchName',
          label: '调研名称',
          // 第一列需显示固定值: 第一行默认显示“调研总体要求”，其他行显示“调研连带规范性动作”
          formatter: (value, row, col, index) => (index === 0 ? '调研总体要求' : '调研连带规范性动作'),
        },
        {
          key: 'normativeTypeName',
          label: '调研类型',
        },
        {
          key: 'specificRequirement',
          label: '调研详情',
          render: (
            h,
            { row: { specificRequirement, specificRequirementDetails } },
          ) => this.renderTooltip(
            h,
            specificRequirement,
            specificRequirementDetails,
          ),
        },
        {
          label: '完成时限',
          key: 'completeDeadline',
          formatter: (value) => dayjs(value).format('M月'),
        },
        {
          label: '当前完成情况',
          key: 'completeSituation',
          render: (
            h,
            {
              row: {
                completeSituation,
                researchedGrassroots,
                researchingGrassroots,
                whetherSupportContact,
              },
            },
          ) => (
            // 根据是否展示冒泡字段来渲染数据 为1表示展示 为0表示隐藏
            whetherSupportContact === 1
              ? this.renderTooltip(
                h,
                completeSituation,
                `已调研基层联系点：${researchedGrassroots}<br/>待调研基层联系点：${researchingGrassroots}`,
              )
              : h('span', completeSituation)),
        },
      ],
      userId: getStorageInfo('loginName'),
    };
  },

  methods: {
    /**
     * 切换页签
     */
    handleTabClick(tab) {
      this.activeTab = tab.name;
      this.changeTableData();
    },
    /**
     * 修改展示的表格数据
     */
    changeTableData() {
      const { activeTab, tableDataMap, tableData } = this;
      this.currentTableData = tableDataMap[activeTab] || tableData;
    },
    /**
     * 获取表格数据
     */
    fetchTableData() {
      const { researchLedgers = [], userId } = this;
      // 如果是公司领导，则只展示该用户的数据，否则展示所有用户的数据 tableData还需用于展示页签
      this.tableData = isCompanyLeader()
        ? filter(researchLedgers, ['leadingUserId', userId])
        : cloneDeep(researchLedgers);
      this.tableDataMap = this.processTableData(this.tableData);
      // 如果默认选中的标签页不存在，则选中第一个标签页
      this.activeTab = this.tableDataMap?.[this.activeTab] ? this.activeTab : keys(this.tableDataMap)[DEFAULT_TAB];
      this.changeTableData();
    },
    /**
     * 处理表格数据
     */
    processTableData(tableData) {
      return isEmpty(tableData) ? {} : chain(tableData)
        .keyBy('leadingUserId')
        .mapValues((user) => {
          // 创建外层字段对象
          const { ledgerStatisticsVOS, ...outerFields } = user;
          // 添加固定的规范性动作名称
          const outerWithFixedField = {
            ...outerFields,
            normativeTypeName: outerFields.researchContent,
          };
          // 返回数组：第一个是外层字段，后续是 ledgerStatisticsVOS 的每一项
          return [outerWithFixedField, ...(ledgerStatisticsVOS || [])];
        })
        .value();
    },
    /**
     * 合并单元格
     */
    spanMethod({
      row, column, rowIndex, columnIndex,
    }) {
      const { currentTableData } = this;
      // 解构第一行和其他行
      const [firstRow, ...otherRows] = currentTableData;
      // 1.第一行特殊合并：第二列合并为两列，第三列隐藏
      if (rowIndex === FIRST_INDEX) {
        if (columnIndex === SECOND_INDEX) {
          // 合并第二列为两行
          return mergeSpan(1, 2);
        }
        // 如果是第三列，隐藏
        if (columnIndex === 2) {
          return HIDE_CELL;
        }
        // 其他列正常显示
        return DEFAULT_SPAN;
      }
      // 2.第一列从第二行开始合并，第一列只显示第二行，其余合并隐藏
      if (columnIndex === FIRST_INDEX) {
        // 第二行为起始行，合并剩余所有行
        return rowIndex === SECOND_INDEX ? mergeSpan(otherRows.length) : HIDE_CELL;
      }
      // 3.第二列合并相同内容的行
      if (columnIndex === SECOND_INDEX) {
        const currentValue = get(row, 'normativeTypeName');
        // 计算连续相同项的数量
        const rowspan = chain(otherRows)
          .slice(rowIndex - 1) // 排除第一行
          .takeWhile((rows) => get(rows, 'normativeTypeName') === currentValue) // 取连续相同项
          .size() // 统计数量
          .value();
        /*
         * 判断当前行是否为当前组第一个元素
         * 1.第一行肯定是某一组数据的开始
         * 2.如果上一行的规范性动作名称与当前行不同，则说明当前行是新组的开始。
         * 3.如果上一行的规范性动作名称与当前行相同，则说明当前行不是新组的开始。
         */
        const isStartOfGroup = rowIndex === FIRST_INDEX
          || get(currentTableData[rowIndex - 1], 'normativeTypeName') !== currentValue;
        return isStartOfGroup ? mergeSpan(rowspan) : HIDE_CELL;
      }
      return DEFAULT_SPAN;
    },
    /**
     * 冒泡提示
     */
    renderTooltip(h, displayValue, detailValue) {
      return h(
        'el-tooltip',
        {
          props: {
            placement: 'top', // 提示位置
            openDelay: 500, // 延迟显示时间
            effect: 'light', // 提示效果
          },
          style: {
            display: 'block',
            width: '100%',
            cursor: 'pointer',
          },
        },
        [
          h('span', displayValue),
          h('div', {
            style: {
              whiteSpace: 'pre-wrap',
              color: '#4a90e5',
              maxWidth: '500px',
            },
            slot: 'content',
            domProps: {
              innerHTML: cleanHtml(detailValue),
            },
          }),
        ],
      );
    },
  },
};
